<template>
  <div class="task-group" ref="taskGroupRef">
    <TaskList
      ref="taskListRef"
      allow-operations
      @handleDrag="handleDrag"
      :data="props.taskList"
      :headTitleStatus="headTitleStatus"
      :load-data="
        () => {
          getTaskItemListData()
          emit('refresh')
        }
      "
      add-task-button>
      <template #head="{ item }">
        <div
          class="group-head"
          @click="handleHeadTitle(item)"
          :style="{ backgroundColor: item.itemColor, color: item.itemColor ? '#fff' : '' }">
          <div class="group-title">
            <el-tooltip>
              <template #content>
                {{ item.itemName }}
                <br />
                {{ dayjs(item.itemBegin).format('YYYY-MM-DD') }} 至 {{ dayjs(item.itemEnd).format('YYYY-MM-DD') }}
              </template>
              <span class="group-name">{{ item.itemName }}</span>
            </el-tooltip>
            <span class="task-count">{{ item.infoCount }}</span>
          </div>
          <div class="item-box-header-action">
            <el-icon
              class="more-icon"
              :class="{ 'icon-active': item.showMoreIcon }"
              v-if="item.taskListLength > 3"
              @click.stop="handleLookMore(item)"
              size="16">
              <ArrowDown />
            </el-icon>
            <el-icon @click.stop="handleOpenAddDialog(item)" size="16"><Plus /></el-icon>
            <el-popover placement="bottom" popper-class="more-operation-popover">
              <div class="group-operation">
                <div class="btn" @click.stop="handleUpdateTaskGroup(item)">修改</div>
                <div class="btn" @click.stop="handleDeleteTaskGroup(item)">删除</div>
              </div>
              <template #reference>
                <el-icon style="margin-right: 5px" size="16"><MoreFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </div>
      </template>
    </TaskList>
  </div>
</template>

<script setup>
import { deleteTcTaskItem } from '@/assets/api/task'
import { ElMessage, ElMessageBox } from 'element-plus'
import { MoreFilled, Plus, ArrowDown } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ref, unref } from 'vue'

const props = defineProps({
  taskList: Array,
})

const emit = defineEmits(['refresh', 'updateTaskGroup'])

const getTaskItemListData = inject('getTaskItemListData')

const taskListRef = ref()
const headTitleStatus = ref(true)

function handleLookMore(item) {
  item.showMoreIcon = !item.showMoreIcon
  let arr = []
  if (item.showMoreIcon) {
    item.taskList = item.taskList.slice(0, 3)
  } else {
    arr = props.taskList.filter((ii) => ii.itemId === item.itemId)
    item.taskList = arr[0].taskList
  }
}

function handleUpdateTaskGroup(item) {
  emit('updateTaskGroup', JSON.parse(JSON.stringify(item)))
}

function handleHeadTitle(item) {
  if (item.taskList.length === 0) {
    headTitleStatus.value = !headTitleStatus.value
  }
}
//打开 添加任务
function handleOpenAddDialog(item) {
  headTitleStatus.value = null
  if (item.taskList.length === 0 && !taskListRef.value.isNeedFold) {
    headTitleStatus.value = false
    return
  }
  taskListRef.value.openAddDialog(item)
}

const taskGroupRef = ref(null)

function handleDrag(val) {
  setTimeout(() => {
    taskGroupRef.value.scrollLeft = val + 100
  }, 200)
}

function handleDeleteTaskGroup(item) {
  ElMessageBox.confirm(`是否删除阶段【${item.itemName}】?`, '删除确认', {
    cancelButtonText: '取消',
    confirmButtonText: '确认',
    type: 'warning',
  })
    .then(() => {
      if (item.taskList.length) {
        ElMessage.warning('此阶段已有任务, 无法删除')
        return
      }
      deleteTcTaskItem(item.itemId).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除成功')
          getTaskItemListData()
          emit('refresh')
        } else {
          ElMessage.error(res.msg)
        }
      })
    })
    .catch(() => {})
}
</script>

<style scoped lang="scss">
// :deep(.el-dropdown-menu) {
//   min-width: 120px;
//   position: absolute !important;
//   top: 35px !important;
//   left: -45px !important;
// }
.task-group {
  @include use-flex();
  height: 100%;
  overflow: auto;
  .group-head {
    @include use-flex(center, space-between);
    font-size: 16px;
    padding: 11px;
    border-radius: 8px;
    color: var(--elp-text-color-secondary);
    background-color: var(--elp-bg-color);
    &-fold {
      &-item {
        width: 100%;
        display: flex;
      }
    }
    .group-title {
      @include use-flex(center);
      width: calc(100% - 80px);
      .group-name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 160px;
        display: inline-block;
      }
      .task-count {
        margin-right: 5px;
      }
    }
    .group-operation {
      .update-btn,
      .delete-btn {
        cursor: pointer;
      }
    }
    .elp-icon {
      cursor: pointer;
      & + .elp-icon {
        margin-left: 10px;
      }
    }
  }
  :deep(.task-list) {
    position: relative;
    .task-item {
      position: absolute;
      top: 0;
      transition: 0.5s;
    }
  }
  .more-icon {
    transition: 0.5s;
    transform: rotate(0);
  }
  .icon-active {
    color: #777c85;
    transform: rotate(180deg);
  }
}
</style>
